<template>
  <div>
    <a-modal
      :title="modalTitle"
      v-model="visible1"
      :footer="handleFooter"
      :afterClose="handleCloseModal"
      width="50%"
    >
      <div class="modalContainer">
        <a-form
          style="text-align: left"
          labelAlign="left"
          :layout="formLayout"
          :label-col="{ span: 8 }"
        >
          <a-form-item
            label="班次名称"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input
              default-value=""
              placeholder="最多20个字符（中英文或数字）"
              :disabled="disabled"
            />
          </a-form-item>
          <a-form-item
            label="上下班次数"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-radio-group
              default-value="1"
              @change="handleCommutingTimes"
              :disabled="disabled"
            >
              <a-radio-button value="1"> 1次上下班 </a-radio-button>
              <a-radio-button value="2"> 2次上下班 </a-radio-button>
              <a-radio-button value="3"> 3次上下班 </a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="考勤方式"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-radio-group
              name="kaoqinType"
              v-model="kaoqinType"
              @change="changeKaoqinType"
              :disabled="disabled"
            >
              <a-radio :value="1"> 固定时间考勤 </a-radio>
              <a-radio :value="2"> 弹性考勤 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item class="cardContent">
            <a-card style="background: #f8f8f8">
              <div style="padding-bottom: 10px; margin-bottom: 10px">
                <span>工作时长1：</span>
                <span>9小时0分钟</span>
              </div>
              <!-- // 固定时间考勤 -->
              <div class="setTime" v-show="kaoqinType === 1">
                <div class="workTimes">
                  <div
                    style="
                      margin: 10px 0;
                      padding-top: 10px;
                      border-top: 1px dashed #dddddd;
                    "
                  >
                    第一次上班时间
                  </div>
                  <div style="display: flex; justify-content: space-between">
                    <div>
                      <div style="margin-bottom: 50px">
                        <span>上班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                      <div>
                        <span>下班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                    </div>
                    <div>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为迟到
                      </p>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早可提前<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟进行打卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为早退
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最晚可延后<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟进行打卡
                      </p>
                    </div>
                  </div>
                </div>
                <div class="workTimes" v-show="CommutingTimes > 1">
                  <div
                    style="
                      margin: 10px 0;
                      padding-top: 10px;
                      border-top: 1px dashed #dddddd;
                    "
                  >
                    第二次上班时间
                  </div>
                  <div style="display: flex; justify-content: space-between">
                    <div>
                      <div style="margin-bottom: 50px">
                        <span>上班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                      <div>
                        <span>下班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                    </div>
                    <div>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为迟到
                      </p>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早可提前<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟进行打卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为早退
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最晚可延后<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟进行打卡
                      </p>
                    </div>
                  </div>
                </div>
                <div class="workTimes" v-show="CommutingTimes > 2">
                  <div
                    style="
                      margin: 10px 0;
                      padding-top: 10px;
                      border-top: 1px dashed #dddddd;
                    "
                  >
                    第三次上班时间
                  </div>
                  <div style="display: flex; justify-content: space-between">
                    <div>
                      <div style="margin-bottom: 50px">
                        <span>上班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                      <div>
                        <span>下班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                    </div>
                    <div>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为迟到
                      </p>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早可提前<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟进行打卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为早退
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最晚可延后<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟进行打卡
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- // 弹性时间考勤 -->
              <div class="flexTime" v-show="kaoqinType === 2">
                <div class="workTimes">
                  <div
                    style="
                      margin: 10px 0;
                      padding-top: 10px;
                      border-top: 1px dashed #dddddd;
                    "
                  ></div>
                  <div style="display: flex; justify-content: space-between">
                    <div>
                      <div style="margin-bottom: 50px">
                        <span>上班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                      <div>
                        <span>下班时间：</span>
                        <a-time-picker
                          :disabled="disabled"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />
                      </div>
                    </div>
                    <div>
                      <p style="margin-bottom: 15px">
                        晚到超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早<a-time-picker
                          style="width: 100px"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />打上班卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最早超过<a-input-number
                          default-value="0"
                          placeholder="请输入"
                          :disabled="disabled"
                          style="width: 100px"
                        />分钟记为半天缺卡
                      </p>
                      <p style="margin-bottom: 15px">
                        最晚<a-tag color="cyan"> 次日 </a-tag
                        ><a-time-picker
                          style="width: 100px"
                          :default-value="moment('00:00', 'HH:mm')"
                          format="HH:mm"
                        />打下班卡
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div style="display: flex">
                <div style="margin-top: 5px">弹性打卡时间 :</div>
                <div>
                  <div>
                    <p style="margin-bottom: 15px">
                      上班最多可晚到<a-input-number
                        default-value="0"
                        placeholder="请输入"
                        :disabled="disabled"
                        style="width: 100px"
                      />小时<a-input-number
                        default-value="0"
                        placeholder="请输入"
                        :disabled="disabled"
                        style="width: 100px"
                      />小时
                    </p>
                    <p style="color: rgba(0, 0, 0, 0.3); margin-bottom: 10px">
                      上班晚到几分钟,下班需晚走几分钟
                    </p>
                  </div>
                  <div>
                    <p style="margin-bottom: 15px">
                      下班最多可早走<a-input-number
                        default-value="0"
                        placeholder="请输入"
                        :disabled="disabled"
                        style="width: 100px"
                      />小时<a-input-number
                        default-value="0"
                        placeholder="请输入"
                        :disabled="disabled"
                        style="width: 100px"
                      />分钟
                    </p>
                    <p style="color: rgba(0, 0, 0, 0.3)">
                      上班晚到几分钟,下班需晚走几分钟
                    </p>
                  </div>
                </div>
              </div>
            </a-card>
          </a-form-item>
          <a-form-item>
            <a-button type="link" style="padding: 0" @click="handleMoreRules">
              更多考勤规则<a-icon :type="arrowDirection" />
            </a-button>
            <div v-show="arrowDirection === 'up'">
              <div v-show="CommutingTimes === 1">
                <a-checkbox :disabled="disabled" @change="onChange">
                  中途休息时间
                </a-checkbox>
                <a-time-picker
                  :disabled="disabled"
                  :default-value="moment('00:00', 'HH:mm')"
                  format="HH:mm"
                />
                <span>-</span>
                <a-time-picker
                  :disabled="disabled"
                  :default-value="moment('00:00', 'HH:mm')"
                  format="HH:mm"
                />
                <span style="color: rgba(0, 0, 0, 0.3)"
                  >休息时间不计入工时</span
                >
              </div>
              <div>
                <a-checkbox :disabled="disabled" @change="onChange">
                  下班免打卡
                  <span style="color: rgba(0, 0, 0, 0.3)"
                    >开启后，系统会自动打下班卡</span
                  >
                </a-checkbox>
              </div>
              <div>
                <a-checkbox :disabled="disabled" @change="onChange">
                  晚走次日晚到
                  <span style="color: rgba(0, 0, 0, 0.3)"
                    >该规则不支持排班制和自由班制</span
                  >
                </a-checkbox>
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <div style="background: #f0f2f5; padding: 24px 24px 0">
      <a-card :bordered="false">
        <div>
          <div style="padding-bottom: 20px">
            <a-input
              layout="inline"
              ref="userNameInput"
              v-model="userName"
              style="width: 46%; margin-right: 15px"
              placeholder="请输入班次名称或创建人姓名"
            >
              <a-icon slot="prefix" type="search" />
            </a-input>
            <a-checkbox @change="showMe">只展示我创建的班次</a-checkbox>
            <a-button
              type="primary"
              icon="plus"
              @click="addTimes"
              style="float: right"
            >
              新建班次
            </a-button>
          </div>
        </div>
        <div>
          <a-table
            :row-key="(record) => record.login.uuid"
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <template slot="name" slot-scope="name">{{ name.first }}</template>
            <template slot="dob" slot-scope="dob">{{ dob.date }}</template>
            <template slot="login" slot-scope="login">{{
              login.username
            }}</template>
            <template slot="action">
              <a-button type="link" @click="toLook" style="padding: 0 5px"
                >查看</a-button
              >
              <a-button type="link" @click="toEdit" style="padding: 0 5px"
                >编辑</a-button
              >
              <a-button type="link" @click="confirm" style="padding: 0 5px"
                >删除</a-button
              >
            </template>
            <template slot="registered" slot-scope="registered">{{
              registered.date
            }}</template>
          </a-table>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
const queryData = (params) => {
  return axios.get('https://randomuser.me/api', { params: params })
}
const columns = [
  {
    title: '班次名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '考勤时间',
    dataIndex: 'dob',
    key: 'dob',
    ellipsis: false,
    scopedSlots: { customRender: 'dob' },
  },
  {
    title: '创建人',
    dataIndex: 'login',
    key: 'login',
    ellipsis: true,
    scopedSlots: { customRender: 'login' },
  },
  {
    title: '最后更新时间 ',
    dataIndex: 'registered',
    key: 'registered',
    sorter: true,
    ellipsis: false,
    scopedSlots: { customRender: 'registered' },
  },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    scopedSlots: { customRender: 'action' },
    align: 'right',
  },
]

export default {
  name: 'shifts',
  data () {
    return {
      modalTitle: '新建班次',
      arrowDirection: 'down',//箭头方向
      disabled: false,
      userName: '',
      loading: false,
      pagination: {
        showSizeChanger: true,
        showTotal: (total) => `共${total}条`,
      },
      visible1: false,
      data: [],
      columns,
      // 查看对话框
      CommutingTimes: 'oneTimes',
      formLayout: 'horizontal',
      kaoqinType: 1,
    }
  },
  mounted () {
    this.fetch()
    let allHeight = document.body.clientHeight
    console.log(allHeight)
  },
  methods: {
    handleOk () {
      console.log('OK')
    },
    handleCloseModal () {
      console.log('关闭')
    },
    onChange () {

    },
    // 控制footer显示隐藏
    handleFooter () {
      if (this.modalTitle === '查看班次') {
        return null
      }
      return [<a-button v-on:click={() => this.handleCancleModal(false)}>取消</a-button>, <a-button type="primary" v-on:click={() => this.handleCancleModal(true)}>
        确定
      </a-button>]
    },
    handleCancleModal (flag) {
      this.visible1 = false
    },
    //点击更多考勤规则
    handleMoreRules () {
      this.arrowDirection = this.arrowDirection === 'up' ? 'down' : 'up'
    },
    moment,
    emitEmpty () {
      this.$refs.userNameInput.focus()
      this.userName = ''
    },
    showMe (e) {
      console.log(`checked = ${e.target.checked}`)
    },
    // 新建班次
    addTimes () {
      this.visible1 = true
      this.disabled = false
      this.modalTitle = '新建班次'
    },
    // 删除按钮
    confirm () {
      this.$confirm({
        title: '提示',
        content: '确认删除该班次？',
        okText: '确认',
        cancelText: '取消',
        // 确定删除的回调
        onOk () {
          console.log('删除')
        },
        // 取消的回调
        onCancel () { },
      })
    },
    handleOk () {
      this.loading = true
      setTimeout(() => {
        this.visible = false
        this.loading = false
      }, 3000)
    },
    handleCancel () {
      this.visible = false
    },
    handleTableChange (pagination, filters, sorter) {
      // console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      })
    },
    fetch (params = {}) {
      this.loading = true
      queryData({
        results: 10,
        ...params,
      }).then(({ data }) => {
        const pagination = { ...this.pagination }
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = 100
        this.loading = false
        this.data = data.results
        console.log(this.data)
        this.pagination = pagination
      })
    },
    // 查看对话框
    toLook () {
      this.visible1 = true
      this.disabled = true
      this.modalTitle = '查看班次'
    },
    // 编辑对话框
    toEdit () {
      this.visible1 = true
      this.disabled = false
      this.modalTitle = '编辑班次'
    },
    toCancel () {
      this.visible1 = false
    },
    toSureEdit (e) {
      console.log(e)
      this.loading = true
      setTimeout(() => {
        this.visible1 = false
        this.loading2 = false
      }, 3000)
    },
    handleCommutingTimes (e) {
      this.CommutingTimes = e.target.value
    },
    changeKaoqinType (e) {
      console.log('radio checked', e.target.value)
    },
  },
  computed: {
    formItemLayout () {
      const { formLayout } = this
      return formLayout === 'horizontal' ? { labelCol: { span: 3, offset: 0 }, wrapperCol: { span: 14 } } : {}
    },
  },
}
</script>

<style lang="scss" scoped>
.cardContent .ant-card-body {
  padding: 10px !important;
}
.modalContainer {
  height: 350px;
  overflow-y: scroll;
}
</style>
